<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>洛可可白⚡️打地鼠</title>
    <style>
      * {
        box-sizing: border-box;
      }

      h1 {
        text-align: center;
        line-height: 30px;
      }

      .bigBox {
        width: 60%;
        height: 400px;
        margin: 20px auto;
        background-color: #cbbb3e;
      }

      .wam-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        height: 260px;
      }

      .wam-hole {
        position: relative;
        width: 100px;
        height: 100px;
        margin: 0 20px;
        background-color: #f5732d;
      }

      .wam-mole {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* 地鼠 */
        background-image: url("https://pic.52112.com/180516/EPS180516_57/9jagBhddHW_small.jpg");
        background-size: 100% 100%;
        display: none;
      }

      .wam-mole--up {
        display: block;
      }

      .wam-score {
        font-size: 2rem;
        text-align: center;
      }

      .wam-message {
        font-size: 1rem;
        text-align: center;
        margin-top: 20px;
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <h1>打地鼠</h1>
    <div class="bigBox">
      <div class="wam-container">
        <div class="wam-hole">
          <div class="wam-mole"></div>
        </div>
        <div class="wam-hole">
          <div class="wam-mole"></div>
        </div>
        <div class="wam-hole">
          <div class="wam-mole"></div>
        </div>
        <div class="wam-hole">
          <div class="wam-mole"></div>
        </div>
        <div class="wam-hole">
          <div class="wam-mole"></div>
        </div>
      </div>
      <div class="wam-score">分数: 0</div>
      <div class="wam-message">准备好了吗？点击我开始</div>
    </div>

    <script>
      const container = document.querySelector(".wam-container");
      const scoreBoard = document.querySelector(".wam-score");
      const message = document.querySelector(".wam-message");
      const moles = Array.from(container.querySelectorAll(".wam-hole"));

      let lastHole;
      let score = 0;
      let isPlaying = false;
      let timeUp = false;

      // 随机时间生成地鼠
      function popUpMole() {
        if (timeUp) return;
        const time = Math.random() * (1500 - 500) + 500;
        const hole = randomHole(moles);
        hole.querySelector("div").classList.add("wam-mole--up");
        setTimeout(() => {
          hole.querySelector("div").classList.remove("wam-mole--up");
          if (!timeUp) popUpMole();
        }, time);
      }

      // 随机选择一个地鼠洞
      function randomHole(holes) {
        const idx = Math.floor(Math.random() * holes.length);
        const hole = holes[idx];
        if (hole === lastHole) return randomHole(holes);
        lastHole = hole;
        return hole;
      }

      // 点击地鼠
      function whackMole(e) {
        if (!e.isTrusted) return; // 防止作弊
        if (!isPlaying) return;
        if (!e.target.matches(".wam-mole")) return;
        score++;
        scoreBoard.textContent = `分数: ${score}`;
        e.target.parentNode
          .querySelector("div")
          .classList.remove("wam-mole--up");
      }
      // 开始游戏
      function startGame() {
        score = 0;
        scoreBoard.textContent = "分数: 0";
        isPlaying = true;
        timeUp = false;
        message.textContent = "";
        popUpMole();
        setTimeout(() => {
          isPlaying = false;
          timeUp = true;
          message.textContent = `一分钟您的得分是: ${score}；点我再来一次！`;
        }, 60000);
      }

      // 初始化地鼠洞
      moles.forEach((mole) => mole.addEventListener("click", whackMole));
      document
        .querySelector(".wam-message")
        .addEventListener("click", startGame);
    </script>
  </body>
</html>
